<template>
  <div class="count">
    <header>
      <input type="text" v-model="inputVal" />
      <button @click="add">添加</button>
    </header>
    <ul class="tab">
      <li
        v-for="(item, index) in list"
        :class="{ active: checkIndex == index }"
        :key="index"
        @click="cutTab(index)"
      >
        {{ item.title }}
      </li>
    </ul>
    <section>
      <h2>{{ list[checkIndex].extend }}</h2>
      <span style="color: orange" @click="timeSort">时间排序</span>
    </section>
    <ul class="run-count">
      <li v-for="(n, i) in list[checkIndex].child" :key="i">
        <input
          type="text"
          v-if="n.iseit"
          v-model="n.name"
          @blur="n.iseit = false"
        />
        <p v-else @dblclick="n.iseit = true">{{ n.name }}</p>
        <i>{{ n.time }}</i>
        <span @click="del(i)">删除</span>
      </li>
      <!-- <li>三国演义</li> -->
    </ul>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  data() {
    return {
      inputVal: "", // input 的值
      list: [
        {
          title: "书籍",
          extend: "正在看书籍",
          child: [
            { name: "三国演义", iseit: false, time: "2021-10-15 08:38:33" },
            { name: "红楼梦", iseit: false, time: "2021-10-14 08:38:33" },
            { name: "西游记", iseit: false, time: "2021-10-13 08:38:33" },
          ],
        },
        {
          title: "电影",
          extend: "正在看电影",
          child: [
            { name: "太极", iseit: false, time: "2021-10-15 08:38:33" },
            { name: "敢死队", iseit: false, time: "2021-10-14 08:38:33" },
            { name: "机械师", iseit: false, time: "2021-10-13 08:38:33" },
          ],
        },
        {
          title: "游戏",
          extend: "正在玩游戏",
          child: [
            { name: "英雄联盟", iseit: false, time: "2021-10-15 08:38:33" },
            { name: "王者荣耀", iseit: false, time: "2021-10-12 08:38:33" },
          ],
        },
        {
          title: "综艺",
          extend: "正在看综艺",
          child: [
            { name: "王牌对王牌", iseit: false, time: "2021-10-14 08:38:33" },
            { name: "吐槽大会", iseit: false, time: "2021-10-14 08:38:33" },
            { name: "奇葩说", iseit: false, time: "2021-10-11 08:38:33" },
          ],
        },
        {
          title: "体育",
          extend: "正在看体育",
          child: [
            { name: "足球", iseit: false, time: "2021-10-15 08:38:33" },
            { name: "羽毛球", iseit: false, time: "2021-10-13 08:38:33" },
            { name: "乒乓球", iseit: false, time: "2021-10-10 08:38:33" },
          ],
        },
      ],
      checkIndex: 0, // 选中tab的索引
      sortNum: true, // 升序
    };
  },
  created() {
    let val = JSON.parse(localStorage.getItem("tabList"));
    if (val) {
      this.list = val;
    }
  },
  watch: {
    list: {
      handler() {
        localStorage.setItem("tabList", JSON.stringify(this.list));
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    add() {
      // !this.inputVal 不存在的意思
      if (!this.inputVal) {
        alert("输入的内容不能为空");
        return;
      }

      // let arr = [1,2,3,4];
      // some 数组的方法 在数组中找到符合条件的元素就返回true，如果找不到就返回false
      // let bol = arr.some(item => item == 6);
      // console.log(bol);
      let bool = this.list[this.checkIndex].child.some(
        (item) => item == this.inputVal
      );
      console.log(bool);
      if (bool) {
        alert("该数据已存在，不能重复添加");
        return;
      }
      this.list[this.checkIndex].child.push({
        name: this.inputVal,
        iseit: false,
        time: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      });
      this.inputVal = "";
    },
    // toLocaleString 格式化时间的
    cutTab(val) {
      this.checkIndex = val;
    },
    del(index) {
      // 删除事件
      this.list[this.checkIndex].child.splice(index, 1);
    },
    timeSort() {
      // 时间排序的方法
      // this.sortNum 值为true 代表升序 值为false代表降序
      this.sortNum = !this.sortNum;
      //  console.log(this.sortNum);
      if (this.sortNum) {
       this.list[this.checkIndex].child.sort(
          (a, b) => new Date(a.time) - new Date(b.time)
        );
      } else {
         this.list[this.checkIndex].child.sort(
          (a, b) => new Date(b.time) - new Date(a.time)
        );
      }
      console.log(new Date('2021-10-13 08:38:33'));
    },
  },
};
</script>

<style lang='scss' scoped>
.count {
  width: 800px;
  height: 600px;
  margin: 100px auto;
  background: #ccc;
  li {
    list-style: none;
  }
  i {
    margin-left: 50px;
  }
  section {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
  .tab {
    display: flex;
    .active {
      color: #fff;
      background: blue;
    }
    li {
      width: 100px;
      line-height: 50px;
      text-align: center;
      background: chartreuse;
    }
  }

  // h2 {
  //   text-align: center;
  //   // margin: 10px 0;
  // }
  .run-count {
    span {
      display: none;
      margin-left: auto;
    }
    li {
      display: flex;
      height: 40px;
      align-items: center;
      padding: 0 20px;
      &:hover {
        background: blue;
        color: #fff;
        span {
          display: inline-block;
          cursor: pointer;
        }
      }
    }
  }
  header {
    display: flex;
    align-items: center;
    height: 50px;
    justify-content: center;
  }
  input {
    height: 40px;
    width: 300px;
  }
  button {
    height: 40px;
    // line-height: 40px;
    width: 80px;
    text-align: center;
    margin-left: 10px;
  }
}
</style>
